<!--<template>-->
<!--  <div class="home-container">-->
<!--    <el-image-->
<!--      src="https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422"-->
<!--      fit="fill"-->
<!--      width="100%"-->
<!--      height="100%"-->
<!--    />-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->

<!--export default {-->
<!--  name: 'Index'-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.home-container{-->
<!--  width: 100%;-->
<!--  height: 500px;-->
<!--}-->
<!--</style>-->
<template>
  <div class="dashboard-container">
    <!-- 欢迎横幅 -->
    <div class="welcome-banner">
      <h1>社区数据概览</h1>
      <p>实时掌握社区动态，高效管理用户内容</p>
    </div>

    <!-- 轮播图 -->
    <div class="carousel-section">
      <el-carousel height="300px" indicator-position="outside">
        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
          <!--          <el-image :src="item.image" fit="scale-down" :alt="item.title" style="width: 100%; height: 100%;" />-->
          <img :src="item.image" class="carousel-image" :alt="item.title">
          <div class="carousel-caption">
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 数据卡片 -->
    <div class="data-cards">
      <el-row :gutter="20">
        <el-col v-for="(card, index) in statCards" :key="index" :span="6">
          <el-card shadow="hover" class="stat-card">
            <div class="card-icon" :style="{backgroundColor: card.color}">
              <i :class="card.icon" />
            </div>
            <div class="card-content">
              <h3>{{ card.title }}</h3>
              <p class="value">{{ card.value }}</p>
              <p class="trend" :class="card.trend > 0 ? 'up' : 'down'">
                <i :class="card.trend > 0 ? 'el-icon-top' : 'el-icon-bottom'" />
                {{ Math.abs(card.trend) }}% 同比
              </p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 社区活动展示 -->
    <div class="community-showcase">
      <el-card shadow="never">
        <div slot="header" class="showcase-header">
          <span>热门社区活动</span>
          <el-button type="text">查看更多</el-button>
        </div>
        <div class="showcase-content">
          <div v-for="(item, index) in communityActivities" :key="index" class="showcase-item">
            <img :src="item.image" class="activity-image">
            <div class="activity-info">
              <h4>{{ item.title }}</h4>
              <p>{{ item.description }}</p>
              <div class="activity-meta">
                <span><i class="el-icon-user" /> {{ item.participants }}人参与</span>
                <span><i class="el-icon-time" /> {{ item.date }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 快速操作 -->
    <div class="quick-actions">
      <el-card shadow="never">
        <div slot="header">
          <span>快速操作</span>
        </div>
        <div class="action-buttons">
          <el-button type="primary" icon="el-icon-edit" @click="goToPostManagement">访客管理</el-button>
          <el-button type="success" icon="el-icon-user" @click="goToUserManagement">用户管理</el-button>
          <el-button type="warning" icon="el-icon-chat-line-round" @click="goToCommentManagement">投诉建议</el-button>
          <el-button type="info" icon="el-icon-data-line" @click="goToStatistics">数据统计</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      carouselItems: [
        {
          image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
          title: '社区活动季',
          description: '参与最新活动，赢取丰厚奖励'
        },
        {
          image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
          title: '新功能上线',
          description: '社区新增话题讨论功能，快来体验'
        },
        {
          image: 'https://img2.baidu.com/it/u=406938211,1591165442&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400',
          title: '优秀用户展示',
          description: '本月活跃用户榜单揭晓'
        }
      ],
      statCards: [
        {
          title: '注册用户',
          value: '12,456',
          trend: 12.5,
          icon: 'el-icon-user-solid',
          color: '#409EFF'
        },
        {
          title: '新增帖子',
          value: '3,245',
          trend: 8.2,
          icon: 'el-icon-document',
          color: '#67C23A'
        },
        {
          title: '社区互动',
          value: '28,901',
          trend: 15.3,
          icon: 'el-icon-chat-dot-round',
          color: '#E6A23C'
        },
        {
          title: '活跃度',
          value: '78%',
          trend: 2.4,
          icon: 'el-icon-data-line',
          color: '#F56C6C'
        }
      ],
      communityActivities: [
        {
          image: 'https://img0.baidu.com/it/u=763302533,386234641&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375',
          title: '技术分享会',
          description: '每月一次的技术交流活动，分享最新开发经验',
          participants: 156,
          date: '2025-04-10'
        },
        {
          image: 'https://img0.baidu.com/it/u=2011871013,2549700756&fm=253&fmt=auto&app=138&f=JPEG?w=607&h=385',
          title: '编程挑战赛',
          description: '年度编程大赛，挑战你的算法能力',
          participants: 289,
          date: '2025-03-15'
        },
        {
          image: 'https://img2.baidu.com/it/u=793402050,1592914846&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
          title: '开源项目展',
          description: '展示社区成员贡献的优秀开源项目',
          participants: 98,
          date: '2025-05-10'
        }
      ]
    }
  },
  methods: {
    goToPostManagement() {
      this.$router.push('/visitor/visitor')
    },
    goToUserManagement() {
      this.$router.push('/system/user')
    },
    goToCommentManagement() {
      this.$router.push('/suggest/suggest')
    },
    goToStatistics() {
      // this.$router.push('/statistics')
      this.$message.warning('暂未开放...')
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.welcome-banner {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.welcome-banner h1 {
  font-size: 28px;
  color: #303133;
  margin-bottom: 10px;
}

.welcome-banner p {
  font-size: 16px;
  color: #909399;
}

.carousel-section {
  margin-bottom: 30px;
}

.carousel-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.carousel-caption h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.data-cards {
  margin-bottom: 30px;
}

.stat-card {
  position: relative;
  overflow: hidden;
  height: 140px;
}

.card-icon {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 30px;
  opacity: 0.2;
}

.card-content {
  position: relative;
  z-index: 1;
}

.card-content h3 {
  font-size: 16px;
  color: #909399;
  margin-bottom: 10px;
}

.card-content .value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.card-content .trend {
  font-size: 12px;
}

.card-content .trend.up {
  color: #67C23A;
}

.card-content .trend.down {
  color: #F56C6C;
}

.community-showcase {
  margin-bottom: 30px;
}

.showcase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.showcase-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.showcase-item {
  width: 32%;
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s;
}

.showcase-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.activity-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.activity-info {
  padding: 15px;
}

.activity-info h4 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #303133;
}

.activity-info p {
  font-size: 14px;
  color: #606266;
  margin-bottom: 15px;
  line-height: 1.5;
}

.activity-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
}

.quick-actions {
  margin-bottom: 30px;
}

.action-buttons {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.action-buttons .el-button {
  margin: 10px;
  min-width: 180px;
}
</style>
